<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <link rel="stylesheet" href="dist/css/vendor/bootstrap.min.css"/>
    <link rel="stylesheet" href="dist/css/flat-ui.css"/>

    <link rel="stylesheet" href="dist/css/bike.css"/>

    <link rel="shortcut icon" href="img/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script src="js/vendor/html5shiv.js"></script>
    <script src="js/vendor/respond.min.js"></script>
    <![endif]-->

    <title>首页</title>

</head>
<body>

<!--头部-->
<div class="header navbar-fixed-top">

    <div class="container">

        <nav class="navbar navbar-inverse" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-02">
                    <span class="sr-only">Toggle navigation</span>
                </button>
                <a class="navbar-brand" href="#">Flat UI</a>
            </div>
            <div class="collapse navbar-collapse" id="navbar-collapse-02">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#fakelink" class="dropdown-toggle" data-toggle="dropdown">Products<span
                            class="caret"></span></a>

                        <ul class="dropdown-menu">
                            <li><a href="#fakelink">Configure Clubs</a></li>
                            <li><a href="#fakelink">Configure Feature Plans</a></li>
                        </ul>

                    </li>


                    <li><a href="#fakelink">Features</a></li>
                </ul>
                <form class="navbar-form navbar-right" action="#" role="search">
                    <div class="form-group">
                        <div class="input-group">
                            <input class="form-control" id="navbarInput-02" type="search" placeholder="Search">
                      <span class="input-group-btn">
                        <button type="submit" class="btn"><span class="fui-search"></span></button>
                      </span>
                        </div>
                    </div>
                </form>
            </div>
            <!-- /.navbar-collapse -->
        </nav>
        <!-- /navbar -->
    </div>
</div>


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="http://image0.lietou-static.com/img/54b0fdaba310618d86a7612801a.jpg" class="img-responsive"
                 alt="...">

            <div class="carousel-caption">
                <h3>First slide label</h3>

                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </div>
        </div>
        <div class="item">
            <img src="http://image0.lietou-static.com/img/54ac94a6a310618d86a75c9f02c.jpg" class="img-responsive"
                 alt="...">

            <div class="carousel-caption">
                <h3>Second slide label</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>

        <div class="item">
            <img src="http://image0.lietou-static.com/img/54aa49aea310618d86a75aa001a.jpg" class="img-responsive"
                 alt="...">

            <div class="carousel-caption">
                <h3>Second slide label</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<div class="container">

    <h2>标题</h2>


    <div class="row">
        <div class="col-lg-12">
            <div class="row">
                <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
                    <div class="tile">
                        <img src="img/icons/svg/compas.svg" alt="Compas" class="tile-image big-illustration">

                        <h3 class="tile-title">Web Oriented</h3>

                        <p>100% convertable to HTML/CSS layout.</p>
                        <a class="btn btn-primary btn-large btn-block" href="http://designmodo.com/flat">Get Pro</a>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
                    <div class="tile">
                        <img src="img/icons/svg/loop.svg" alt="Infinity-Loop" class="tile-image">

                        <h3 class="tile-title">Easy to Customize</h3>

                        <p>Vector-based shapes and minimum of layer styles.</p>
                        <a class="btn btn-primary btn-large btn-block" href="http://designmodo.com/flat">Get Pro</a>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
                    <div class="tile">
                        <img src="img/icons/svg/pencils.svg" alt="Pensils" class="tile-image">

                        <h3 class="tile-title">Color Swatches</h3>

                        <p>Easy to add or change elements.dsfsfdsfdsfsf</p>
                        <a class="btn btn-primary btn-large btn-block" href="http://designmodo.com/flat">Get Pro</a>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
                    <div class="tile">
                        <img src="img/icons/svg/ribbon.svg" alt="ribbon" class="tile-hot-ribbon">
                        <img src="img/icons/svg/chat.svg" alt="Chat" class="tile-image">

                        <h3 class="tile-title">Free for Share</h3>

                        <p>Your likes, shares and comments helps us.</p>
                        <a class="btn btn-primary btn-large btn-block" href="http://designmodo.com/flat">Get Pro</a>
                    </div>

                </div>
            </div>
            <!-- /row -->
        </div>
    </div>
    <!-- /row -->


    <h6>Custom content</h6>

    <div class="row three_row_div">
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img data-src="holder.js/100%x200" alt="...">

                <div class="caption">
                    <h3>Thumbnail label</h3>

                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
                        at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

                   <div class="row">
                       <div class="col-xs-6"><a role="button" class="btn btn-primary" href="#">Button</a></div>
                       <div class="col-xs-6"><a role="button" class="btn btn-primary" href="#">Button</a></div>



                   </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img data-src="holder.js/100%x200" alt="...">

                <div class="caption">
                    <h3>Thumbnail label</h3>

                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
                        at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

                    <p><a role="button" class="btn btn-primary" href="#">Button</a> <a role="button"
                                                                                       class="btn btn-default" href="#">Button</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img data-src="holder.js/100%x200" alt="...">

                <div class="caption">
                    <h3>Thumbnail label</h3>

                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
                        at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

                    <p>
                        <a role="button" class="btn btn-primary" href="#">Button</a>
                        <a role="button" class="btn btn-default" href="#">Button</a>
                    </p>
                </div>
            </div>
        </div>
    </div>


    <h4>Thumbnail</h4>

    <div class="row">


        <div class="col-md-6">

            <div class="row">

                <div class="col-xs-6 col-md-6">
                    <a class="thumbnail" href="#">
                        <img data-src="holder.js/100%x180" alt="...">
                    </a>
                </div>
                <div class="col-xs-6 col-md-6">
                    <a class="thumbnail" href="#">
                        <img data-src="holder.js/100%x180" alt="...">
                    </a>
                </div>

            </div>

            <div class="row show_more">
                <div class="col-xs-12 col-md-12">

                    <p>
                        <button type="button" class="btn btn-default btn-lg btn-block">点击查看更多</button>
                    </p>

                </div>
            </div>

        </div>

        <div class="col-md-6">

            <div class="row">

                <div class="col-xs-6 col-md-6">
                    <a class="thumbnail" href="#">
                        <img data-src="holder.js/100%x180" alt="...">
                    </a>
                </div>
                <div class="col-xs-6 col-md-6">
                    <a class="thumbnail" href="#">
                        <img data-src="holder.js/100%x180" alt="...">
                    </a>
                </div>

            </div>

            <div class="row show_more">
                <div class="col-xs-12 col-md-12">

                    <p>
                        <button type="button" class="btn btn-default btn-lg btn-block">点击查看更多</button>
                    </p>

                </div>
            </div>

        </div>


    </div>




</div>
<!-- /.container -->

<div id="footer2">
    <div class="container">
        <div class="row">
            <div class="span12">
                <div class="copyright">
                    FLATI
                    &copy;
                    <script type="text/javascript">
                        //<![CDATA[
                        var d = new Date()
                        document.write(d.getFullYear())
                        //]]>
                    </script>
                    - All Rights Reserved :
                    Template by <a href="http://spiralpixel.com">Spiral Pixel</a>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="dist/js/vendor/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="dist/js/flat-ui.min.js"></script>
<script src="assets/js/application.js"></script>


</body>
</html>